<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="./../templates/StakeholderPortalTemplate.xhtml">

    <ui:define name="content">
        <f:view beforePhase="#{addUnstructuredContentTemplateElementsManager.initView}">                                        
            <table align="center">
                <tr>
                    <td><p:messages id="statusMessages"/> </td>
                </tr>
                <tr> 
                    <td colspan="5">
                        <h:outputText value="#{addUnstructuredContentTemplateElementsManager.templateSelected}" style="font-weight: bold;" /> 
                    </td>
                </tr>
                <tr>
                    <td align="right" colspan="3">
                        <h:graphicImage value="#{addUnstructuredContentTemplateElementsManager.imageofTemplate}"/>
                    </td>
                </tr> 
                <tr> 
                    <td width="150px">
                        <h:outputText value="#{bundle['unstructured.template.label']}" style="font-weight: bold; font-size: 16px;" /> </td>
                    <td>
                        <h:selectOneMenu id="selectContent" required="true" value="#{addUnstructuredContentTemplateElementsManager.panelSelected}" converter="panelContentConverter">
                            <f:selectItems value="#{addUnstructuredContentTemplateElementsManager.noOfPanels}"/>
                        </h:selectOneMenu>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h:outputText value="#{bundle['unstructured.template.contentTitle']}" style="font-weight: bold; font-size: 16px;" /> </td>
                    <td>
                  <p:inputText id="ContentTitle" value="#{addUnstructuredContentTemplateElementsManager.panelTitle}"/></td>
                </tr>
                <tr>
                   
                </tr>
                <tr><td colspan="5"><hr/></td></tr>
                <tr> 
                    <td colspan="2">
                        <table>
                            <tr>
                                <td colspan="2"><h:outputText value="#{bundle['unstructured.template.label2']}" style="font-weight: bold; font-size: 16px;"/></td>
                            </tr>
                            <tr>
                                <td width="200px">
                                    <p:panel header="#{bundle['unstructured.template.header']}">
                                        <p><h:graphicImage id="txt1" value="/images/TextElement.png" style="width:180px;height:70px;"/>
                                        <p:draggable for="txt1" revert="true" helper="clone" /></p>
                                        <p><h:graphicImage id="img" value="/images/ImageElement.png" style="width:180px;height:70px;"/>
                                        <p:draggable for="img"  revert="true" helper="clone"/></p>
                                        <p> <p:graphicImage id="vid" value="/images/VideoElement.png" style="width:180px;height:70px;"/>
                                        <p:draggable for="vid"  revert="true" helper="clone" /></p>
                                    </p:panel>
                                </td>
                                <td width="500px">
                                    <p:panel header="Elements Selected" styleClass="slot">
                                        <p:droppable tolerance="fit" onDropUpdate="selectedItem" dropListener="#{addUnstructuredContentTemplateElementsManager.elementsDropped}" activeStyleClass="ui-state-highlight">  
                                            <p:outputPanel id="componentsSelected" styleClass="slot" >
                                                <p:dataTable id="selectedItem" var="UnstructuredContentElementEntity" value="#{addUnstructuredContentTemplateElementsManager.selectedList}" style="width:480px;"> 
                                                    <p:column headerText="#{bundle['unstructured.template.elementselected']}">  
                                                        <h:outputText value="#{UnstructuredContentElementEntity.name}" />  
                                                    </p:column>  
                                                    <p:column headerText="#{bundle['unstructured.template.orderofdisplay']}">  
                                                        <p:cellEditor>
                                                            <f:facet name="output">  
                                                                <h:outputText value="#{UnstructuredContentElementEntity.displayOrder}" />  
                                                            </f:facet>  
                                                            <f:facet name="input">  
                                                                <p:inputText value="#{UnstructuredContentElementEntity.displayOrder}" style="width:100%"/>  
                                                            </f:facet>
                                                        </p:cellEditor>
                                                    </p:column> 
                                                    <p:column headerText="#{bundle['unstructured.template.options']}">
                                                        <p:rowEditor />  
                                                    </p:column> 
                                                    <p:column style="width:100px">  
                                                        <p:commandButton update=":form:display" oncomplete="confirmDeleteElements.show()" image="ui-icon ui-icon-close" title="Delete">  
                                                            <f:setPropertyActionListener value="#{UnstructuredContentElementEntity}" target="#{addUnstructuredContentTemplateElementsManager.selectedElement}" />  
                                                        </p:commandButton>
                                                    </p:column>  
                                                </p:dataTable>
                                                <p:confirmDialog message="#{bundle['unstructured.template.deletemessage']}" width="400"  
                                                                 showEffect="explode" hideEffect="explode"  
                                                                 header="#{bundle['unstructured.template.confirm']}" severity="alert" widgetVar="confirmDeleteElements">  

                                                    <p:commandButton value="#{bundle['unstructured.template.deleteconfirmation']}" update="selectedItem" actionListener="#{addUnstructuredContentTemplateElementsManager.deleteElements}" oncomplete="confirmDeleteElements.hide()"/>  
                                                    <p:commandButton value="#{bundle['unstructured.template.deletecancel']}" onclick="confirmDeleteElements.hide()" type="button" />  
                                                </p:confirmDialog>  
                                                <p:commandButton id="btnSubmitPanel" actionListener="#{addUnstructuredContentTemplateElementsManager.addPanelComponents}" value="#{bundle['unstructured.template.confirmelements']}" ajax="true" update="statusMessages panelsAdded componentsSelected"/>
                                            </p:outputPanel>   
                                        </p:droppable>                                       
                                    </p:panel> 
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <p:dataTable id="panelsAdded" var="UnstructuredContentPanelEntity" value="#{addUnstructuredContentTemplateElementsManager.templatePanels}" >
                                        <p:column headerText="Panels Added">  
                                            <h:outputText value="#{UnstructuredContentPanelEntity.panelName}" />  
                                        </p:column>  
                                        <p:column headerText="Elements added in the panel">  
                                            <p:dataList value="#{UnstructuredContentPanelEntity.unstructuredContentElement}" var="UnstructuredContentElementEntity">  
                                                #{UnstructuredContentElementEntity.name} 
                                            </p:dataList> 
                                        </p:column>  
                                        <p:column style="width:100px">  
                                            <p:commandButton update=":form:display" oncomplete="confirmation.show()" image="ui-icon ui-icon-close" title="Delete">  
                                                <f:setPropertyActionListener value="#{UnstructuredContentPanelEntity}" target="#{addUnstructuredContentTemplateElementsManager.selectedPanel}" />  
                                            </p:commandButton>
                                        </p:column>  
                                    </p:dataTable>
                                    <p:confirmDialog message="Are you sure?" width="400"  
                                                     showEffect="explode" hideEffect="explode"  
                                                     header="Confirm" severity="alert" widgetVar="confirmation">  

                                        <p:commandButton value="Yes sure" update="panelsAdded" actionListener="#{addUnstructuredContentTemplateElementsManager.delete}" oncomplete="confirmation.hide()"/>  
                                        <p:commandButton value="Not yet" onclick="confirmation.hide()" type="button" />  
                                    </p:confirmDialog>  
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p:commandButton id="btnConfirmPanel" actionListener="#{addUnstructuredContentTemplateElementsManager.addPanelDetails}" value="Add Panel Details" ajax="true"/>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </f:view>
    </ui:define>

</ui:composition>
